
import { useRef, useLayoutEffect, useState } from 'react';

const LazyComponent = ({ lazyContent }) => {
  const elementRef = useRef();
  const [isCanSee, setIsCanSee] = useState(false); // 是否可以看见
  const count = useRef(0);

  useLayoutEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        // console.log(entry, 'entry');
        if (entry.isIntersecting) {
          setIsCanSee(true);
          observer.disconnect();
        }
      },
      {
        rootMargin: '0px 0px 0px 0px',
        // threshold: 0.5
      } // 将阈值设置为更高的值
    );

    if (elementRef.current) {
      observer.observe(elementRef.current);
    }
    // 如果元素已经在可视区域，则立即设置为可见,使用setTimeout是为了防止元素在可视区域内，但是还没有渲染出来，导致的判断错误
    setTimeout(() => {
      if (elementRef.current && elementRef.current.getBoundingClientRect().top <= window.innerHeight) {
        // console.log("初始化的时候就在可视区域内");
        setIsCanSee(true);
        count.current++;
      } else if (count.current === 0) {
        // console.log("初始化的时候不在可视区域内");
        setIsCanSee(false);
      }
    }, 5e2)

    return () => {
      observer.disconnect();
    };
  }, []);



  return (
    <div
      ref={elementRef}
      className={`animate__animated ${isCanSee ? 'animate__fadeInUp' : ''}`}
      style={{ visibility: isCanSee ? 'visible' : 'hidden' }}
    >
      {lazyContent}
    </div>
  );
};

export default LazyComponent;
